{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-vignette-img",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/blurvignette/blurvignetteimg.tsx",
      "content": "import { cn } from '@/lib/utils';\r\nimport Image from 'next/image';\r\nimport React from 'react';\r\nimport {\r\n  BlurVignette,\r\n  BlurVignetteArticle,\r\n} from '@/components/ui/blur-vignette';\r\n\r\nfunction index() {\r\n  return (\r\n    <>\r\n      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>\r\n        <BlurVignette\r\n          radius='24px'\r\n          inset='10px'\r\n          transitionLength='80px'\r\n          blur='15px'\r\n        >\r\n          <Image\r\n            src='https://img.freepik.com/free-photo/african-kid-enjoying-life_23-2151447718.jpg'\r\n            alt='grid'\r\n            width={600}\r\n            className='mx-auto w-full relative h-full object-cover'\r\n            height={600}\r\n          />\r\n          <BlurVignetteArticle />\r\n        </BlurVignette>\r\n        <BlurVignette\r\n          radius='24px'\r\n          inset='10px'\r\n          transitionLength='80px'\r\n          blur='15px'\r\n        >\r\n          <Image\r\n            src='https://img.freepik.com/free-photo/portrait-middle-aged-man-taking-photos-with-device-world-photography-day_23-2151672359.jpg'\r\n            alt='grid'\r\n            width={600}\r\n            className='mx-auto w-full relative h-full object-cover'\r\n            height={600}\r\n          />\r\n          <BlurVignetteArticle />\r\n        </BlurVignette>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default index;\r\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/blur-vignette.tsx",
      "content": "'use client';\r\nimport React, { createContext, useContext } from 'react';\r\nimport { cn } from '@/lib/utils';\r\ninterface BlurVignetteContextProps {\r\n  radius?: string;\r\n  inset?: string;\r\n  transitionLength?: string;\r\n  blur?: string;\r\n}\r\n\r\nconst BlurVignetteContext = createContext<BlurVignetteContextProps>({\r\n  radius: '24px',\r\n  inset: '20px',\r\n  transitionLength: '44px',\r\n  blur: '6px',\r\n});\r\n\r\nexport const useBlurVignetteContext = () => useContext(BlurVignetteContext);\r\n\r\ninterface BlurVignetteProps {\r\n  classname?: string;\r\n  children: React.ReactNode;\r\n  radius?: string;\r\n  inset?: string;\r\n  transitionLength?: string;\r\n  blur?: string;\r\n  blurclassname?: string;\r\n}\r\n\r\nexport const BlurVignette: React.FC<BlurVignetteProps> = ({\r\n  classname,\r\n  children,\r\n  radius = '24px',\r\n  inset = '20px',\r\n  transitionLength = '44px',\r\n  blur = '6px',\r\n}) => {\r\n  return (\r\n    <BlurVignetteContext.Provider\r\n      value={{ radius, inset, transitionLength, blur }}\r\n    >\r\n      <div\r\n        className={cn('relative aspect-square overflow-hidden', classname)}\r\n        style={{ borderRadius: radius }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </BlurVignetteContext.Provider>\r\n  );\r\n};\r\ninterface BlurVignetteArticleProps {\r\n  children?: React.ReactNode;\r\n  classname?: string;\r\n}\r\n\r\nexport const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({\r\n  children,\r\n  classname,\r\n}) => {\r\n  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'blur-vignette bottom-0 left-0 w-full h-full z-1',\r\n        classname\r\n      )}\r\n      style={\r\n        {\r\n          '--radius': radius,\r\n          '--inset': inset,\r\n          '--transition-length': transitionLength,\r\n          '--blur': blur,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n",
      "type": "registry:component"
    }
  ]
}